<script setup lang="ts">
/**
 * 用来浏览图片
 * 使用 <x-image=view url="url"/>
 */
import {DEFAULT_IMAGE_PATH} from "@/utils/constant";

const props = withDefaults(defineProps<{
  url: string | undefined,
  width?: string | number,
  borderRadius?: string | number,
  fit?: '' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
  baseUrl?: string
}>(), {
  width: '100%',
  borderRadius: '0.6em',
  fit: 'cover',
  baseUrl: DEFAULT_IMAGE_PATH
})
const computedWidth = computed(() => {
  let width = props.width
  if (typeof props.width === 'number') {
    width = props.width + 'px'
  }
  return width
})
const tempBorderRadius = computed(() => {
  let borderRadius = props.borderRadius
  if (typeof props.borderRadius === 'number') {
    borderRadius = props.borderRadius + 'px'
  }
  return borderRadius
})
</script>

<template>
  <el-image
      v-if="props.url"
      :fit="props.fit"
      lazy
      crossorigin
      class="my-image"
      :src="props.baseUrl + props.url"
  >
    <template #error>
      <div class="empty-photo">
        <i-ep-picture-filled/>
      </div>
    </template>
  </el-image>
  <div v-else class="empty-photo">
    <i-ep-picture/>
  </div>
</template>

<style scoped lang="scss">
.my-image {
  width: v-bind(computedWidth);
  border-radius: v-bind(tempBorderRadius);
}

.empty-photo {
  width: v-bind(computedWidth);
  display: flex;
  border-radius: v-bind(tempBorderRadius);
  align-items: center;
  justify-content: center;
  color: #8c939d;
}
</style>